<template>
	<div>
		<div class="time-wrap">
			<a-form-model-item label="">
				<a-range-picker
					class="date-range-leng"
					@change="timeChange"
					v-model="value._timeRange"
					:disabled-date="disabledDate"
					format="YYYY-MM-DD HH:mm:ss"
					show-time
					:allowClear="false"
				/>
			</a-form-model-item>
			<a-form-model-item label="">
				<span>依次做过</span>
			</a-form-model-item>
		</div>
		<div class="event-container" v-for="(step, i) in value.steps" :key="step.id">
			<div class="event-wrap">
				<div class="step-wrap">
					<a-form-model-item>
						<span class="small-order">{{ order + (i + 1) }}</span>
					</a-form-model-item>
					<a-form-model-item label="">
						<a-select
							v-model="value.steps[i].eventAlias"
							class="select-leng-l"
							@select="eventChange"
						>
							<a-select-opt-group v-for="group in events" :key="group.groupName">
								<span slot="label">—{{ group.groupName }}—</span>
								<a-select-option
									:title="ev.eventAlias"
									:value="ev.eventAlias"
									v-for="ev in group.events"
									:key="i + '-' + ev.eventCode"
									:label="ev"
								>
									{{ ev.eventAlias }}
								</a-select-option>
							</a-select-opt-group>
						</a-select>
					</a-form-model-item>
					<a-form-model-item v-if="value.steps[i].eventAlias">
						<span @click="addProperty(i)" class="add-btn">
							<a-icon type="plus-circle" />
							添加条件
						</span>
					</a-form-model-item>
				</div>
				<div>
					<div class="del" @click="delEvent(i)" v-if="i > 1">
						<a-icon type="close" />
					</div>
				</div>
			</div>
			<div class="item-wrap">
				<Logic
					v-model="value.steps[i].filter.relation"
					v-if="value.steps[i].filter.conditions.length > 1"
				/>
				<div class="logic-wrap" v-else></div>
				<div class="item-content">
					<div
						class="content"
						v-for="(condition, j) in value.steps[i].filter.conditions"
						:key="condition.id"
					>
						<div class="property-content">
							<UserArttr
								arttrType="event"
								:eventCode="value.steps[i].eventCode"
								v-model="value.steps[i].filter.conditions[j]"
							/>
						</div>
						<div class="del" @click="delProperty(i, j)">
							<a-icon type="close" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<span @click="addEvent" class="add-btn">
				<a-icon type="plus-circle" />
				添加事件
			</span>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Logic from '../Logic.vue'
import UserArttr from './UserArttr.vue'
import { UserProperty, Step } from './model'
import { getEvents } from '@/api/userGroup'
@Component({
	name: 'BehaviorSeries',
	components: {
		Logic,
		UserArttr
	}
})
export default class BehaviorSeries extends Vue {
	@Prop() private value!: any
	@Prop() private order!: string
	events: Array<any> = []

	mounted() {
		this.getEventList()
	}

	timeChange(e: any): void {
		const [from, to] = e
		this.value.fromDate = this.$moment(from).format('YYYY-MM-DD')
		this.value.toDate = this.$moment(to).format('YYYY-MM-DD')
	}
	delProperty(i: number, j: number) {
		this.value.steps[i].filter.conditions.splice(j, 1)
	}
	addProperty(i: number) {
		const conditions: UserProperty[] = this.value.steps[i].filter.conditions
		if (conditions.length > 0 && !conditions[conditions.length - 1].functionCode) {
			this.$notify.warning({
				message: '请先填写完整已添加的属性'
			})
			return
		}
		const property = new UserProperty()
		conditions.push(property)
	}
	addEvent() {
		const steps: Step[] = this.value.steps
		if (
			steps.length > 1 &&
			!(steps[steps.length - 1].eventCode && steps[steps.length - 2].eventCode)
		) {
			this.$notify.warning({
				message: '请填写完已添加的事件'
			})
			return
		}
		const step = new Step()
		steps.push(step)
	}
	delEvent(index: number) {
		if (index > 1) {
			this.value.steps.splice(index, 1)
		}
	}
	eventChange(e: any, option: any) {
		const { componentOptions, key } = option
		let step_i = key.split('-')[0]
		let eventCode = componentOptions?.propsData?.label.eventCode //可能获取不到为undefined
		if (eventCode === undefined) eventCode = ''
		this.value.steps[step_i].eventCode = eventCode
	}
	/**
	 * 属性接口
	 */
	getEventList() {
		const projectId: any = localStorage.getItem('productId')
		getEvents(projectId)
			.then(res => {
				const { data } = res
				this.events = data
			})
			.catch(e => {
				throw e
			})
	}
	disabledDate(current: any) {
		return current && current > this.$moment().endOf('day')
	}
}
</script>

<style lang="scss" scoped>
.event-container {
	padding-top: 4px;
}
.time-wrap,
.step-wrap {
	display: flex;
	& > .ant-form-item {
		margin-left: 4px;
	}
	.ant-form-item {
		margin-bottom: 4px;
	}
}
.event-wrap {
	display: flex;
	justify-content: space-between;
}
.logic-wrap {
	width: 25px;
}
.item-wrap {
	display: flex;
	padding-left: 10px;
	.item-content {
		flex: 1;
	}
	.content {
		padding-top: 4px;
		display: flex;
		align-items: center;
		.del {
			width: 50px;
			text-align: center;
			cursor: pointer;
		}
	}
}
.small-order {
	font-size: 14px;
	color: #fff;
	display: inline-block;
	align-items: center;
	background: $blue;
	margin-right: 4px;
	line-height: 24px;
	padding-left: 4px;
	padding-right: 4px;
}
</style>
